<template>
	<view class="content">
		<view class="top">
			<!-- <uni-nav-bar title="购买详情" backgroundColor="transparent" :border="false" leftIcon="left"
				@clickLeft="back" fixed></uni-nav-bar> -->
			<view class="box">

				<view class="subscription-item">
					<view class="item-top">
						<view class="item-top-img">
							<u--image :src="order.goods_img" width="180rpx" height="250rpx"></u--image>
						</view>
						<view class="item-top-text">
							<view class="text-top">
								<view class="text-top-title">{{ order.goods_name }}</view>
								<view class="text-top-time">时间范围：{{ order.start_time }} 至 {{ order.end_time }}</view>
							</view>
							<view class="text-bottom">
								<text class="text-bottom-text">收益：</text>
								<text class="text-bottom-amount">¥{{ order.earnings }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="accountList">
					<view class="subscription-item empty-box" v-if="incomelist.length == 0">
						<u-empty mode="list"></u-empty>
					</view>
					<view class="accountList-item" v-for="item in incomelist">
						<view class="accountList-item-avatar">
							<view class="avatar-top">
								<u-avatar :src="item.avatar" size="30"></u-avatar>
							</view>
							<view class="avatar-bottom">
								<view class="avatar-bottom-name">
									{{item.nick}}
								</view>
								<view class="avatar-bottom-time">
									{{item.create_time}}
								</view>
							</view>
						</view>
						<view class="accountList-item-amount">
							+¥{{item.commission}}
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {},
				incomelist: [],
				paging: {
					page: 1,
					limit: 10,
				},
				total: null,
				order_id: '',
				type: '',
				avatar:''
			}
		},
		onLoad({
			order_id,
			type,
			avatar
		}) {
			this.order_id = order_id
			this.type = type
			this.avatar = avatar
			this.getOrderDetail(order_id,type)
			this.getIncomeList()
		},
		onReachBottom() {
			this.getIncomeList()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		methods: {
			getOrderDetail(order_id,type){
				this.$api.orderdetail({
					order_id,
					type
				}).then(res => {
					console.log(res)
					this.order = res.data
				})
			},
			back() {
				uni.navigateBack()
			},
			getIncomeList() {
				if (this.incomelist.length == this.total) return
				this.$api.incomelist({
					...this.paging,
					order_id: this.order_id,
					type: 3
				}).then(res => {
					console.log(res)
					this.incomelist = [...this.incomelist, ...res.data.list]
					this.incomelist.map(item=>{
						if(item.avatar){
							item.avatar =this.$store.state.user.baseURL + item.avatar
						}else{
							item.avatar = this.avatar
						}
					})
					
					this.total = res.data.total
					this.paging.page++
				})
			},
			// 刷新列表
			refresh() {
				this.paging.page = 1
				this.total = null
				this.incomelist = []
				this.getIncomeList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 20rpx
	}

	.content {
		background: url('@/static/img/bg.png');
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
			padding-bottom: 30rpx;
		}
	}

	.subscription-item {
		padding: 0 30rpx;
		padding-top: 38rpx;
		margin-top: 16rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.item-top {
			display: flex;
			padding-bottom: 32rpx;

			.item-top-img {
				width: 180rpx;
			}

			.item-top-text {
				flex: 1;
				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.text-top {
					.text-top-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #111111;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}

					.text-top-time {
						padding-top: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #999999;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.text-bottom {
					display: flex;

					.text-bottom-text,
					.text-bottom-amount {
						display: inline-block;
					}

					.text-bottom-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #989898;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}

					.text-bottom-amount {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #D06122;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}

	.accountList {
		margin-top: 16rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		padding-bottom: 50rpx;

		.accountList-item {
			border-bottom: 2rpx solid #e7e7e7;
			padding: 20rpx 0 30rpx 0;
			display: flex;
			justify-content: space-between;

			.accountList-item-avatar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				align-self: center;
				.avatar-bottom {
					padding-left: 20rpx;

					.avatar-bottom-name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}

					.avatar-bottom-time {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #999999;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.accountList-item-amount {
				padding-top: 15rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #D06122;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				align-items: center;
				align-self: center;
			}
		}
	}
</style>